<template>
  <div class="maps" ref="myMap"></div>
</template>

<script>
import * as echarts from "echarts";
import "../assets/js/world.js";
import { dataMap } from "../assets/js/dataMap.js";
import { nameMap } from "../assets/js/nameMap.js";
export default {
  name: "MyVueMap",

  data() {
    return {};
  },

  mounted() {
    // 初始化
    let myChart = echarts.init(this.$refs.myMap);

    let option = {
      // 视图映射
      visualMap: {
        // 分块
        type: "piecewise",
        min: 0,
        max: 50000,
        // 视图映射中文本样式
        textStyle: {
          color: "#6c7cbf",
        },
      },
      // 系列
      series: [
        {
          // 类型
          type: "map",
          // 世界地图
          map: "world",
          data: dataMap,
          nameMap: nameMap,
        },
      ],
    };
    myChart.setOption(option);
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.maps {
  width: 35rem;
  height: 35rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}

</style>